<template>
  <div>
    <!-- <el-button-group>
      <el-button type="primary">个人</el-button>
      <el-button type="primary">团队</el-button>
      <el-button type="primary">门店</el-button>
    </el-button-group> -->

    <!-- 个人 开始 -->
    <div v-if="rankType == 0">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="shopName" label="门店" />
        <el-table-column prop="teamName" label="团队" />
        <el-table-column prop="currentCount" label="当前客户数" />
        <el-table-column prop="counts" label="新客户数" />
        <el-table-column prop="visitCount" label="已上门">
          <template slot-scope="{row}">{{`${row.visitCount}(${row.visitRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="contractCount" label="已签约">
          <template slot-scope="{row}">{{`${row.contractCount}(${row.contractRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="importCount" label="已进件">
          <template slot-scope="{row}">{{`${row.importCount}(${row.importRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="callCount" label="通话次数" />
        <el-table-column prop="callDuration" label="通话时长" />
        <el-table-column prop="depositAmount" label="签约金额" />
        <el-table-column prop="depositBrokerage" label="签约佣金" />
        <el-table-column prop="importAmount" label="在审件金额" />
        <el-table-column prop="importBrokerage" label="在审件佣金" />
      </el-table>
    </div>
    <!-- 个人 end -->

    <!-- 团队 开始 -->
    <div v-if="rankType == 1">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="团队" />
        <el-table-column prop="shopName" label="门店" />
        <el-table-column prop="currentCount" label="当前客户数" />
        <el-table-column prop="counts" label="新客户数" />
        <el-table-column prop="visitCount" label="已上门">
          <template slot-scope="{row}">{{`${row.visitCount}(${row.visitRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="contractCount" label="已签约">
          <template slot-scope="{row}">{{`${row.contractCount}(${row.contractRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="importCount" label="已进件">
          <template slot-scope="{row}">{{`${row.importCount}(${row.importRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="callCount" label="通话次数" />
        <el-table-column prop="callDuration" label="通话时长" />
        <el-table-column prop="depositAmount" label="签约金额" />
        <el-table-column prop="depositBrokerage" label="签约佣金" />
        <el-table-column prop="importAmount" label="在审件金额" />
        <el-table-column prop="importBrokerage" label="在审件佣金" />
      </el-table>
    </div>
    <!-- 团队 end -->

    <!-- 门店 开始 -->
    <div v-if="rankType == 2">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="门店" />
        <el-table-column prop="currentCount" label="当前客户数" />
        <el-table-column prop="counts" label="新客户数" />
        <el-table-column prop="visitCount" label="已上门">
          <template slot-scope="{row}">{{`${row.visitCount}(${row.visitRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="contractCount" label="已签约">
          <template slot-scope="{row}">{{`${row.contractCount}(${row.contractRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="importCount" label="已进件">
          <template slot-scope="{row}">{{`${row.importCount}(${row.importRate}%)`}}</template>
        </el-table-column>
        <el-table-column prop="callCount" label="通话次数" />
        <el-table-column prop="callDuration" label="通话时长" />
        <el-table-column prop="depositAmount" label="签约金额" />
        <el-table-column prop="depositBrokerage" label="签约佣金" />
        <el-table-column prop="importAmount" label="在审件金额" />
        <el-table-column prop="importBrokerage" label="在审件佣金" />
      </el-table>
    </div>
    <!-- 门店 end -->

    <!-- <el-table :data="list" border style="width: 100%">
      <el-table-column prop="name" label="姓名" v-if="rankType === '0'" />
      <el-table-column label="门店" v-if="rankType === '0'">
        <template slot-scope="{ row }">
          <span>{{getShopName(row.shopId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="团队" v-if="rankType === '0'">
        <template slot-scope="{ row }">
          <span>{{getTeamName(row.teamId)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="团队" v-if="rankType === '1'" />
      <el-table-column label="门店" v-if="rankType === '1'">
        <template slot-scope="{ row }">
          <span>{{getShopName(row.shopId)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="门店" v-if="rankType === '2'" />
      <el-table-column prop="counts" label="客户数" />
      <el-table-column prop="contractCount" label="签约数" />
      <el-table-column prop="importCount" label="进件数" />
      <el-table-column prop="depositAmount" label="佣金" />
      <el-table-column prop="productTotalAmount" label="产品总金额" />
      <el-table-column prop="incomeTotalAmount" label="创收总额" />
      <el-table-column prop="rate" label="平均费率" />

      <el-table-column prop="incomeTotalAmount" label="已收金额" />
      <el-table-column prop="surplusAmount" label="未收金额" />
      <el-table-column prop="consumeAmount" label="投入成本" />
      <el-table-column prop="consumeIncomeRate" label="投入产出比" />

    </el-table> -->
  </div>
</template>
<script>
export default {
  name: "RankTable",
  props: {
    rankType: {
      type: String,
    },
    list: {
      type: Array,
      default: () => [],
    },
    allShopList: {
      ype: Array,
      default: () => [],
    },
    allTeamList: {
      ype: Array,
      default: () => [],
    },
  },
  computed: {
    showPersonal() {
      return this.rankType === "0";
    },
    showShop() {
      return ["0", "1"].includes(this.rankType);
    },
  },
  mounted() {
    console.log(this.list);
  },
  methods: {
    getShopName(shopId) {
      return this.allShopList.find((item) => item.value === shopId)?.label;
    },
    getTeamName(teamId) {
      return this.allTeamList.find((item) => item.value === teamId)?.label;
    },
  },
};
</script>
